<template>
    <div class="contentContainer">
        <!-- 列表渲染商品信息 -->
        <el-table 
            :data="tableData"
            style="width: 100%;"
        >
            <el-table-column 
                prop="id"
                label="ID"
                width="80"
            />
            <el-table-column
                label="橱窗图"
                width="120"
            >
                <template #default="scope">
                    <div style="width: 100px; height: 100px; overflow: hidden;">
                        <el-image 
                            style="width: 100%;height: 100%;"
                            :src="scope.row.image"
                            fit="fill"
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column 
                prop="name"
                label="商品名称"
                width=100
            />
            <el-table-column 
                prop="brand"
                label="商品品牌"
                width=100
            />
            <el-table-column 
                prop="name"
                label="商品描述"
                width=240
            />
            <el-table-column 
                prop="created_at"
                label="创建时间"
                width=200
            />
            <el-table-column 
                prop="category.name"
                label="类别"
                width=80
            />
            <el-table-column 
                prop="price"
                label="价格/元"
                width=80
            />
            <el-table-column 
                prop="discounted_price"
                label="折扣价/元"
                width=100
            />
            <el-table-column 
                prop="stock"
                label="库存"
                width=80
            />
            <el-table-column
                label="状态"
                width="80"
            >
                <template #default="scope">
                    <el-tag
                        :type="scope.row.status === 0 ? 'info' : 'success'"
                    >
                        {{ scope.row.status === 0 ? '未上架' : '已上架' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="180"
            >
                <template #default="scope">
                    <el-button
                        type="primary"
                        @click="updateGoods(scope.row)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        @click="deleteGoods(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 用来加载下一页数据 -->
        <div 
            v-show="hasMore"
            style="width: 100%; text-align: center; margin-top: 15px; color: grey;"
            @click="loadData"
        >
            点击加载更多
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { RequestPath, startRequest } from '../base/RequestWork';
import { ElMessage, ElMessageBox, type Action } from 'element-plus';

// 路由管理对象
const router = useRouter();
// 商品列表数据
const tableData = ref();
// 是否还有更多数据可以加载
const hasMore = ref(true);
// 分页偏移
let offset = 0;
// 每页获取数据数量
const limit = 5;
// 组价挂载时加载商品数据
onMounted(() => {
    loadData();
});
// 从服务端获取商品数据
const loadData = () => {
    startRequest(RequestPath.goodsListGet, 'get', {
        offset,
        limit,
    }).then((response) => {
        const data = response.data;
        const datas = tableData.value ?? [];
        hasMore.value = (data.datas ?? []).length >= limit;
        datas.push(...(data.datas ?? []));
        tableData.value = datas;
        offset = datas.length
    }).catch((error) => {
        ElMessage.error({ message: error.response.data.error });
    });
}
// 更新商品的方法
const updateGoods = (goods: any) => {
    // 跳转到编辑页面
    router.replace({ name: 'goodsEdit', params: { mode: 1, id: goods.id } })
}
// 删除商品的方法
const deleteGoods = (goods: any) => {
    // 删除操作属于敏感操作，进行二次确认
    ElMessageBox.confirm('确认删除么？', '提示', {
        confirmButtonText: '删除', 
        cancelButtonText: '取消',
        callback: (action: Action) => {
            startRequest(RequestPath.goodsDelete, 'post', {
                id: goods.id
            }).then((_response) => {
                // 删除数据后，刷新页面，充值offset和tableData
                offset = 0;
                tableData.value = [];
                loadData();
            }).catch((error) => {
                ElMessage.error({ message: error.response.data.error })
            })
        }
    })
}
</script>